﻿
@{
    ViewBag.Title = "LocationServerInfo";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<script src="~/Assets/plugins/jquery-ui/js/jquery-ui-1.10.4.min.js"></script>
<script src="~/Assets/plugins/fullcalendar/js/fullcalendar.min.js"></script>
<script src="~/Assets/plugins/easypiechart/js/jquery.easypiechart.min.js"></script>
<script src="~/Assets/plugins/justgage/js/justgage.1.0.1.min.js"></script>
<script src="~/Assets/plugins/sparkline/js/jquery.sparkline.min.js"></script>
<script>
    //页面 加载完成后开始执行
    window.onload = function () {


        Execute();
    }



    var data = [], totalPoints = 300;
    function getRandomData() {
        if (data.length > 0)
            data = data.slice(1);

        // do a random walk
        while (data.length < totalPoints) {
            var prev = data.length > 0 ? data[data.length - 1] : 50;
            var y = prev + Math.random() * 10 - 5;
            if (y < 0)
                y = 0;
            if (y > 100)
                y = 100;
            data.push(y);
        }

        // zip the generated y values with the x values
        var res = [];
        for (var i = 0; i < data.length; ++i)
            res.push([i, data[i]])
        return res;
    }

    function Execute() {
        if ($("#realtimechart").length) {
            var options = {
                series: { shadowSize: 1 },
                lines: { fill: true, fillColor: { colors: [{ opacity: 1 }, { opacity: 0.1 }] } },
                yaxis: { min: 0, max: 100 },
                xaxis: { show: false },
                colors: ["#435D78"],
                grid: {
                    tickColor: "#dddddd",
                    borderWidth: 0
                },
            };
            var plot = $.plot($("#realtimechart"), [getRandomData()], options);
            function update() {
                plot.setData([getRandomData()]);
                // since the axes don't change, we don't need to call plot.setupGrid()
                plot.draw();

                setTimeout(update, 40);
            }
            update();
        }

        var cpu_g1 = new JustGage({ id: "cpu_g1", value: 80, min: 0, max: 100, title: "Visitors", label: "per minute" });
        var cpu_g1a = new JustGage({ id: "cpu_g1a", value: 45, min: 0, max: 100, title: "Errors", label: "average" });
        var cpu_g2 = new JustGage({ id: "cpu_g2", value: 15, min: 0, max: 100, title: "Timers", label: "" });
        var cpu_g2a = new JustGage({ id: "cpu_g2a", value: 7, min: 0, max: 100, title: "Alerts", label: "" });
        var cpu_g2b = new JustGage({ id: "cpu_g2b", value: 22, min: 0, max: 100, title: "Events", label: "" });

        var mem_g1 = new JustGage({ id: "mem_g1", value: 80, min: 0, max: 100, title: "Visitors", label: "per minute" });
        var mem_g1a = new JustGage({ id: "mem_g1a", value: 45, min: 0, max: 100, title: "Errors", label: "average" });
        var mem_g2 = new JustGage({ id: "mem_g2", value: 15, min: 0, max: 100, title: "Timers", label: "" });
        var mem_g2a = new JustGage({ id: "mem_g2a", value: 7, min: 0, max: 100, title: "Alerts", label: "" });
        var mem_g2b = new JustGage({ id: "mem_g2b", value: 22, min: 0, max: 100, title: "Events", label: "" });

        setInterval(function () {
            mem_g1.refresh(getRandomInt(50, 100));
            mem_g1a.refresh(getRandomInt(50, 100));
            mem_g2.refresh(getRandomInt(0, 50));
            mem_g2a.refresh(getRandomInt(0, 50));
            mem_g2b.refresh(getRandomInt(0, 50));

            cpu_g1.refresh(getRandomInt(50, 100));
            cpu_g1a.refresh(getRandomInt(50, 100));
            cpu_g2.refresh(getRandomInt(0, 50));
            cpu_g2a.refresh(getRandomInt(0, 50));
            cpu_g2b.refresh(getRandomInt(0, 50))
        }, 2000
        );

    }

    function getRandomInt(b, a) { return Math.floor(Math.random() * (a - b + 1)) + b }

</script>

<div class="page-header">
    <div class="pull-left">
        <ol class="breadcrumb visible-sm visible-md visible-lg">
            <li><a href="index.html"><i class="icon fa fa-home"></i>主页</a></li>
            <li class="active"><i class="glyphicon glyphicon-tasks"></i>服务器详情</li>
        </ol>
    </div>

</div>
<div class="row">

    <div class="col-sm-12">
        <div class="panel bk-widget bk-border-off bk-noradius">
            <div class="panel-heading bk-bg-primary">
                <h6><i class="fa fa-random"></i><span class="break"></span>服务器概要</h6>

            </div>
            <hr class="bk-margin-off">
            <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-padding-off-top bk-padding-off-bottom">
                <div class="row">
                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 bk-vcenter bk-padding-top-10 bk-padding-bottom-10">
                        <div class="bk-round bk-border-off bk-bg-darken bk-icon bk-icon-2x bk-icon-default bk-bg-danger">
                            <i class="fa fa-cogs fa-2x"></i>
                        </div>
                    </div>
                    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12 bk-vcenter">
                        <h6 class="bk-fg-danger bk-fg-darken bk-margin-off-bottom"><strong>NEW SETTINGS AVAILABLE</strong></h6>
                        <p>
                            <small>Our dashboard has been updated to have better access and to allow on the fly editing.</small>
                        </p>
                    </div>
                </div>
            </a>
            <hr class="bk-margin-off">
            <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-padding-off-top bk-padding-off-bottom">
                <div class="row">
                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 bk-vcenter bk-padding-top-10 bk-padding-bottom-10">
                        <div class="bk-round bk-border-off bk-bg-darken bk-icon bk-icon-2x bk-icon-default bk-bg-primary">
                            <i class="fa fa-comment fa-2x"></i>
                        </div>
                    </div>
                    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12 bk-vcenter">
                        <h6 class="bk-fg-primary bk-fg-darken bk-margin-off-bottom"><strong>NEW BLOG POST</strong></h6>
                        <p>
                            <small>Chris Pearson wrote a new blog post outlining his latest insights on mobile development.</small>
                        </p>
                    </div>
                </div>
            </a>
            <hr class="bk-margin-off">
            <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-padding-off-top bk-padding-off-bottom">
                <div class="row">
                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 bk-vcenter bk-padding-top-10 bk-padding-bottom-10">
                        <div class="bk-round bk-border-off bk-bg-darken bk-icon bk-icon-2x bk-icon-default bk-bg-info">
                            <i class="fa fa-umbrella fa-2x"></i>
                        </div>
                    </div>
                    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12 bk-vcenter">
                        <h6 class="bk-fg-info bk-fg-darken bk-margin-off-bottom"><strong>NEW SPRINT ACHIEVED!</strong></h6>
                        <p>
                            <small>
                                The C# development team has completed their last sprint for their project and are celebrating with some champagne! Join them on floor 3
                                in the dining hall.
                            </small>
                        </p>
                    </div>
                </div>
            </a>
            <hr class="bk-margin-off">
            <a class="panel-body bk-bg-very-light-gray bk-bg-lighten bk-padding-off-top bk-padding-off-bottom">
                <div class="row">
                    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 bk-vcenter bk-padding-top-10 bk-padding-bottom-10">
                        <div class="bk-round bk-bg-darken bk-border-off bk-icon bk-icon-2x bk-icon-default bk-bg-warning">
                            <i class="fa fa-send-o fa-2x"></i>
                        </div>
                    </div>
                    <div class="col-lg-10 col-md-10 col-sm-10 col-xs-12 bk-vcenter">
                        <h6 class="bk-fg-warning bk-fg-darken bk-margin-off-bottom"><strong>OCTOBER NEWSLETTER</strong></h6>
                        <p>
                            <small>Read all about progress on our projects and new partnerships that will increase our business potential.</small>
                        </p>
                    </div>
                </div>
            </a>
        </div>
    </div>

    <div class="col-sm-12">
        <div class="panel bk-bg-white">
            <div class="panel-heading bk-bg-primary">
                <h6><i class="fa fa-random"></i><span class="break"></span>CPU使用情况</h6>

            </div>
            <div class="panel-body">
                <div id="realtimechart" style="height: 190px; padding: 0px; position: relative;">
                    <canvas class="flot-base" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 1592px; height: 190px;" width="1592" height="190"></canvas>
                    <div class="flot-text" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);">
                        <div class="flot-y-axis flot-y1-axis yAxis y1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;">
                            <div style="position: absolute; top: 175px; left: 11px; text-align: right;" class="flot-tick-label tickLabel">0</div><div style="position: absolute; top: 132px; left: 6px; text-align: right;" class="flot-tick-label tickLabel">25</div><div style="position: absolute; top: 88px; left: 6px; text-align: right;" class="flot-tick-label tickLabel">50</div><div style="position: absolute; top: 45px; left: 6px; text-align: right;" class="flot-tick-label tickLabel">75</div>
                            <div style="position: absolute; top: 1px; left: 0px; text-align: right;" class="flot-tick-label tickLabel">100</div>
                        </div>
                    </div><canvas class="flot-overlay" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 1592px; height: 190px;" width="1592" height="190"></canvas>
                </div>
                <br />
                <p>&nbsp;&nbsp;说明：服务器CPU使用每50毫秒刷新一次，若了解详情，请点击   这里！</p>
            </div>
        </div>
    </div>


    <div class="col-sm-12">
        <div class="panel bk-padding-bottom-20">
            <div class="panel-heading bk-bg-primary">
                <h6><i class="fa fa-bar-chart-o red"></i>CPU使用详情</h6>
                <div class="panel-actions">
                    <a href="charts-others.html#" class="btn-setting"><i class="fa fa-rotate-right"></i></a>
                    <a href="charts-others.html#" class="btn-minimize"><i class="fa fa-chevron-up"></i></a>
                    <a href="charts-others.html#" class="btn-close"><i class="fa fa-times"></i></a>
                </div>
            </div>

            <div class="panel-body">
                <div class="row">
                    <div class="col-sm-6">
                        <div id="cpu_g1" class="sz1"></div>
                    </div>
                    <div class="col-sm-6">
                        <div id="cpu_g1a" class="sz1"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div id="cpu_g2" class="sz0"></div>
                    </div>
                    <div class="col-sm-4">
                        <div id="cpu_g2a" class="sz0"></div>
                    </div>
                    <div class="col-sm-4">
                        <div id="cpu_g2b" class="sz0"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="col-sm-12">
        <div class="panel bk-padding-bottom-20">
            <div class="panel-heading bk-bg-primary">
                <h6><i class="fa fa-bar-chart-o red"></i>内存使用详情</h6>
                <div class="panel-actions">
                    <a href="charts-others.html#" class="btn-setting"><i class="fa fa-rotate-right"></i></a>
                    <a href="charts-others.html#" class="btn-minimize"><i class="fa fa-chevron-up"></i></a>
                    <a href="charts-others.html#" class="btn-close"><i class="fa fa-times"></i></a>
                </div>
            </div>

            <div class="panel-body">
                <div class="row">
                    <div class="col-sm-6">
                        <div id="mem_g1" class="sz1"></div>
                    </div>
                    <div class="col-sm-6">
                        <div id="mem_g1a" class="sz1"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4">
                        <div id="mem_g2" class="sz0"></div>
                    </div>
                    <div class="col-sm-4">
                        <div id="mem_g2a" class="sz0"></div>
                    </div>
                    <div class="col-sm-4">
                        <div id="mem_g2b" class="sz0"></div>
                    </div>
                </div>
            </div>

        </div>
    </div>

</div>